<template>
  <div class="container">
    <div class="main">
      <!-- 顶部按钮栏 -->
      <div class="topBar">
        <!-- 返回按钮 -->
        <el-button class="backButton" @click="backClick">
          <i class="iconfont nt-fanhui"></i>
        </el-button>
        <!-- 中间空白 -->
        <div class="publishFont">
          <p>发布帖子</p>
        </div>
        <!-- 发布按钮 -->
        <el-button class="publishButton" @click="publishPost">
          <i class="iconfont nt-fabu"></i>
        </el-button>
      </div>
      <!-- 主要内容 -->
      <div class="maintain">
        <div class="main_container">
          <div class="avatar">
            <el-avatar size="large" :src="avatarUrl" class="avatar_img"/>
          </div>
          <div class="rightside">
            <div class="rightside_title">
              <el-input v-model="title" placeholder="标题" />
            </div>
            <div class="rightside_cls">
              <el-select v-model="cls_value" clearable placeholder="分类">
                <el-option
                  v-for="item in cls_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="rightside_content">
              <el-input
                v-model="content_textarea"
                :autosize="{ minRows: 13, maxRows: 13 }"
                type="textarea"
                placeholder="内容"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 上传图片 -->
      <div class="uploadImg">
        <el-upload
          class="upload_border"
          drag
          action="#"
          :show-file-list="false"
          :http-request="uploadCos"
        >
          <img style="max-width:304px;max-height:171px" :src="imgUrl" alt="">
        </el-upload>
        <!-- 上传进度条 -->
        <el-progress v-if="ifProgress" :percentage="percentage" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref , onMounted } from 'vue';
import { addPost } from '@/api/posts'
import { UploadFilled } from '@element-plus/icons-vue'
import COS from 'cos-js-sdk-v5'
import { useRoute , useRouter } from 'vue-router'
// 引入pinia中的useStore库
import { useStore } from '@/stores/userData'
// 引入storeToRefs，使普通数据变为响应式数据
import { storeToRefs } from "pinia";
// 接收useStore
const store = useStore()
// 解构并使数据具有响应式
const { userData } = storeToRefs(store);
const route = useRoute()
const router = useRouter()
onMounted(() => {
  avatarUrl.value = userData.value.avatar
})
const avatarUrl = ref('')
const title = ref('')
const content_textarea = ref('')
const cls_value = ref('')
const cls_options = [
  {
    value: '官方发布',
    label: '官方发布',
  },
  {
    value: '学习交流',
    label: '学习交流',
  },
  {
    value: '情感吃瓜',
    label: '情感吃瓜',
  },
  {
    value: '寻人寻物',
    label: '寻人寻物',
  },
  {
    value: '美食探店',
    label: '美食探店',
  },
]
const publishPost = () => {
  let data = {}
  data.posterID = Number(localStorage.getItem('user'))
  data.content = content_textarea.value
  data.title = title.value
  data.classification = cls_value.value
  data.img = imgUrl.value
  addPost(data).then((res) => {
    if(res.code == 1){
      console.log(res);
      ElNotification({
        title: '发布成功',
        message: '帖子已发布至社区',
        type: 'success',
      })
      // userData.value.postNum += 1
      router.push('/')
    }
  })
}
const backClick = () => {
  router.push('/')
}
const percentage = ref(0)
const ifProgress = ref(false)
const imgUrl = ref('https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/pic.jpg')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
  SecretId: 'AKIDRhgOr3ze4D6i4A1buxjETTCeqmSr0tVq', // 身份识别ID
  SecretKey: '5tSkmY4JGwMWP4TcU5PSEjxvd4E7k7DA' // 身份秘钥
})
// 上传腾讯云cos操作
const uploadCos = (res) => {
  if (res.file) {
    // 执行上传操作
    cos.putObject({
      Bucket: 'notewk-1304925042', /* 存储桶 */
      Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
      Key: res.file.name, /* 文件名 */
      StorageClass: 'STANDARD', // 上传模式, 标准模式
      Body: res.file, // 上传文件对象
      onProgress: (progressData) => { // 上传进度
        ifProgress.value = true // 上传时显示进度条
        percentage.value = progressData.percent*100 // 上传过程中进度条百分比数据
        console.log(progressData)
      }
    }, (err, data) => {
      console.log(err || data)
      // 上传成功之后
      if (data.statusCode === 200) {
        imgUrl.value = `https://${data.Location}`
        ifProgress.value = false // 隐藏进度条
      }
    })
  }
}
</script>
<style scoped lang="scss">
.container{
  height: 100vh;
  position: relative;
}
.main{
  height: 90vh;
  width: 100%;
  position: absolute;
  background-color: #fff;
  top: calc(50% - 45vh);
  transition: 0.5s;
  overflow: hidden;
  display: grid;
  grid-template-rows: 2fr 400px 6fr;
}
.main_content{
  height: 90vh;
  width: 100%;
  overflow-y: hidden;
}
.topBar{
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
  position: relative;
}
.backButton{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow:  5px 5px 23px #d1d1d1,-5px -5px 23px #ffffff;
  border: none;
  position: relative;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}
.publishFont{
  width: 70px;
  position: relative;
  top: calc(50% - 11.25px);
  left: calc(50% - 33px);
  p{
    color: #555555;
    text-shadow: 3px 3px 8px #c6c6c6;
  }
}
.publishButton{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow:  5px 5px 23px #d1d1d1,-5px -5px 23px #ffffff;
  border: none;
  position: relative;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}
.maintain{
  height: 100%;
}
.main_container{
  margin: 0 3%;
  height: 100%;
  overflow-y: hidden;
  display: grid;
  grid-template-columns: 60px auto;
}
.avatar{
  .avatar_img{
    margin-top: 30px;
  }
}
.rightside{
  display: grid;
  grid-template-rows: 1fr 1fr 300px;
  padding: 0 20px;
  .rightside_title{
    position: relative;
    top: 10px;
  }
  .rightside_cls{
    position: relative;
    top: 10px;
  }
  .rightside_content{
    top: 10px;
    position: relative;
  }
}
.uploadImg{
  overflow: hidden;
  padding: 0 120px;
}
:deep(.el-upload-dragger){
  height: 150px;
  padding: 0;
}
</style>